<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对话 - 教育对话系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .chat-container {
            height: calc(100vh - 4rem);
        }
        .messages-container {
            height: calc(100vh - 12rem);
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="min-h-screen">
        <nav class="bg-white shadow-sm">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <span class="text-lg font-semibold text-gray-800">
                            教育对话系统 - {% if current_user.role == 'teacher' %}教师{% else %}学生{% endif %}界面
                        </span>
                    </div>
                    <div class="flex items-center">
                        <span class="mr-4 text-gray-600">{{ current_user.username }}</span>
                        <a href="{{ url_for('logout') }}" 
                           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                            退出登录
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="chat-container bg-white rounded-lg shadow-lg flex">
                <!-- 会话列表 -->
                <div class="w-1/4 border-r border-gray-200 p-4">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-medium text-gray-900">会话列表</h2>
                        {% if current_user.role == 'student' %}
                        <form action="{{ url_for('create_conversation') }}" method="POST">
                            <button type="submit" class="text-sm text-indigo-600 hover:text-indigo-500">
                                新建会话
                            </button>
                        </form>
                        {% endif %}
                    </div>
                    <div class="space-y-2">
                        {% for conv in conversations %}
                        <a href="{{ url_for('chat', conversation_id=conv.id) }}" 
                           class="block p-3 hover:bg-gray-50 rounded-lg cursor-pointer {% if conversation and conversation.id == conv.id %}bg-indigo-50{% endif %}">
                            <div class="font-medium text-gray-900">
                                会话 #{{ conv.id }}
                            </div>
                            <div class="text-sm text-gray-500">
                                {% if current_user.role == 'student' %}
                                与教师的对话
                                {% else %}
                                与学生的对话
                                {% endif %}
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                </div>

                <!-- 消息区域 -->
                <div class="flex-1 flex flex-col">
                    {% if conversation %}
                    <div class="messages-container p-4 overflow-y-auto">
                        <div class="space-y-4">
                            {% for message in conversation.messages %}
                            <div class="flex {% if message.author.id == current_user.id %}justify-end{% endif %}">
                                <div class="max-w-lg {% if message.author.id == current_user.id %}bg-indigo-600 text-white{% else %}bg-gray-100 text-gray-900{% endif %} rounded-lg px-4 py-2 shadow">
                                    <div class="text-sm">
                                        {{ message.content }}
                                    </div>
                                    <div class="text-xs mt-1 {% if message.author.id == current_user.id %}text-indigo-200{% else %}text-gray-500{% endif %}">
                                        {{ message.timestamp.strftime('%Y-%m-%d %H:%M') }}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- 输入区域 -->
                    <div class="border-t border-gray-200 p-4">
                        <form method="POST" action="{{ url_for('send_message') }}" class="flex space-x-4">
                            <input type="hidden" name="conversation_id" value="{{ conversation.id }}">
                            <input type="text" name="content" 
                                   class="flex-1 rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                   placeholder="输入消息..."
                                   required>
                            <button type="submit"
                                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                                发送
                            </button>
                        </form>
                    </div>
                    {% else %}
                    <div class="flex-1 flex items-center justify-center">
                        <div class="text-center">
                            <h3 class="text-lg font-medium text-gray-900 mb-2">没有活动的会话</h3>
                            {% if current_user.role == 'student' %}
                            <p class="text-sm text-gray-500">点击"新建会话"开始与教师对话</p>
                            {% else %}
                            <p class="text-sm text-gray-500">等待学生发起会话</p>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <script>
        // 自动滚动到最新消息
        function scrollToBottom() {
            const messagesContainer = document.querySelector('.messages-container');
            if (messagesContainer) {
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
            }
        }
        
        document.addEventListener('DOMContentLoaded', scrollToBottom);
    </script>
</body>
</html> 